import React, { memo, useEffect, useState, useRef } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { userEventAction } from "../../store/actionTypes";
import { UserEventWrap } from "./style";
import UserEvents from "@/components/user/userEvent";
import { getUserFollows, getUserEvent } from "@/services/user";
import { getSizeImage } from "@/utils/format-utils";
import { NavLink } from "react-router-dom";
import DocumentTitle from "react-document-title";

export default memo(function UserEvent(props) {
  const id = props.location.search.split("=")[1];
  const dispatch = useDispatch();
  const [asd, setAsd] = useState(-1);
  const [followArr, setFollowArr] = useState([]);
  const [events, setEvents] = useState([]);
  useEffect(() => {
    dispatch(userEventAction(id, 20, asd));
  }, [dispatch, id, asd]);

  useEffect(() => {
    getUserFollows(id).then((res) => {
      setFollowArr(res.follow);
    });
    getUserEvent(id, 20, asd).then((res) => {
      setEvents(res);
    });
  }, [id, asd]);

  const { userEventInfo, userDetailInfo } = useSelector(
    (state) => ({
      userEventInfo: state.getIn(["userInfo", "userEventInfo"]),
      userDetailInfo: state.getIn(["userInfo", "userDetailInfo"]),
    }),
    shallowEqual
  );

  const handleScroll = (e) => {
    const scrollY = e.path[1].scrollY;
    const clientHeight = e.target.body.clientHeight;
    const scrollHeight =
      e.path[0].body.ownerDocument.scrollingElement.scrollHeight;

    if (scrollY + clientHeight + 2 > scrollHeight) {
      window.removeEventListener("scroll", handleScroll);
      // (userEventInfo)
      if (userEventInfo.length !== 0) {
        if (!userEventInfo[userEventInfo.length - 1].more) {
          return;
        }
        setAsd(userEventInfo[userEventInfo.length - 1].lasttime);
      }
    }
  };
  window.addEventListener("scroll", handleScroll);

  return (
    <DocumentTitle title="网易云音乐">
      <UserEventWrap>
        <div className="userEventTop">
          <h3>TA的动态（{events.length !== 0 ? events.size : ""}）</h3>
        </div>
        <div className="userBbo">
          <div className="userEventBigBox">
            {events.length !== 0 ? (
              events.size === 0 ? (
                <div className="n-nmusic">
                  <h3 className="n-music-h3">
                    <i className="u-music-h3-i"></i>
                    暂时还没有动态
                  </h3>
                </div>
              ) : (
                userEventInfo.map((item, index) => {
                  return (
                    <React.Fragment key={item.lasttime}>
                      <UserEvents
                        userEventInfo={item}
                        userDetailInfo={userDetailInfo}
                      />
                    </React.Fragment>
                  );
                })
              )
            ) : (
              ""
            )}
          </div>
          <div className="userEventRight">
            <div className="taFollows">
              <h3>TA的关注</h3>
              <ul>
                {followArr.length === 0
                  ? ""
                  : followArr.slice(0, 6).map((item, index) => {
                      return (
                        <li key={item.userId} className="followLi">
                          <div className="followBox">
                            <NavLink
                              to={{
                                pathname: "/user/home",
                                search: "?id=" + item.userId,
                              }}
                            >
                              <img
                                src={getSizeImage(item.avatarUrl, 64)}
                                alt=""
                              />
                            </NavLink>
                            <div className="name-p">
                              <p>
                                <NavLink
                                  to={{
                                    pathname: "/user/home",
                                    search: "?id=" + item.userId,
                                  }}
                                >
                                  {item.nickname}
                                </NavLink>
                              </p>
                            </div>
                          </div>
                        </li>
                      );
                    })}
              </ul>
            </div>
          </div>
        </div>
      </UserEventWrap>
    </DocumentTitle>
  );
});
